<template>
  <div class="register_container">
    <div class="logo"></div>
    <div class="main_container">
      <div class="top_message">
        <div style="font-size:35px">
          欢迎注册
        </div>
        <div>
          <span>已有账号？</span>
          <el-button  type="primary" plain @click="to_login">直接登录</el-button>
        </div>
      </div>
      <div class="form_contain">
        <div class="user_head">
          <div class="upload_head">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>

        </div>
        <div class="message">
          <el-form :label-position="labelPosition" label-width="80px" :model="userMessage" :rules="login_form">
            <el-form-item label="用户名">
              <el-input v-model="userMessage.user_name"></el-input>
            </el-form-item>
             <el-form-item label="密码">
              <el-input type="password" v-model="userMessage.user_password"></el-input>
            </el-form-item>
             <el-form-item type="password" label="确认密码">
              <el-input type="password" v-model="userMessage.user_repassword"></el-input>
            </el-form-item>
            <el-form-item label="性别">
            <el-select v-model="userMessage.user_sex" placeholder="选择性别">
              <el-option label="男" value="male"></el-option>
              <el-option label="女" value="female"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model.number="userMessage.user_age"></el-input>
            </el-form-item>
            <el-form-item label="职业">
              <el-input v-model="userMessage.user_pro"></el-input>
            </el-form-item>
            <el-form-item label="爱好">
              <el-input v-model="userMessage.user_hobby"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-button style="width:100px; margin:10px auto;margin-bottom:0px"  type="primary" @click="onSubmit">立即创建</el-button>
    </div>
  </div>
</template>

<script>
import {register} from "@/api";
export default {
   data() {
      return {
        labelPosition: 'right',
        userMessage: {
          user_name: '',
          user_password: '',
          user_repassword:'',
          user_img:'',
          user_age:'',
          user_sex: '',
          user_pro: '',
          user_hobby:''
        },
        imageUrl:'',
        login_form: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在3到10个字符之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在6到16个字符之间', trigger: 'blur' }
        ]
      }
      };
    },
    methods: {
      to_login(){this.$router.push('/')},
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.userMessage.user_img = file.name;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      onSubmit(){
        console.log(this.userMessage);
        this.$store.commit('register', this.userMessage.user_name)
        let user_name = this.userMessage.user_name;
        let user_password = this.userMessage.user_password;
        let user_sex = this.userMessage.user_sex == 'male'?0:1;
        let user_age = this.userMessage.user_age;
        let user_pro = this.userMessage.user_pro;
        let user_hobby = this.userMessage.user_hobby;
        console.log("age",user_age);
        register(
          user_name,
          user_password,
          user_sex,
          user_age,
          user_pro,
          user_hobby
        ).then(res => {
          const staus = res.status;
          if (staus === 200) {
            console.log("注册成功");
            this.$router.push('/')
          }
        });
        


      }
    }
}
</script>

<style lang="less" scoped>
  .register_container{
    // width: 1980px;
    height: 721px;
    background-color: #2b4b6b;
    background-image: url(../../assets/images/login_bg.png);
    display: flex;
    flex-direction: row;
    // padding: 20px;
    .logo{
      width: 300px;
      height: 120px;
      margin:30px;
      background-color: black;
    }
    .main_container{
      display: flex;
      flex-direction: column;
      padding: 20px;
      width: 40%;
      height: 90%;
      margin-top:30px;
      margin-left:10% ;
      background-color: #fff;
        opacity:0.7;
      .top_message{
        display: flex;
        flex-direction: column;
        margin-right:60% ;
       
      }
      .form_contain{
        display: flex;
        flex-direction: row;
        .el-textarea__inner,.el-input__inner{
                background: transparent;
                width: 400px;
          }
        .user_head{
          width: 30%;
          height: 70%;
          margin:auto 30px;
          border-right: solid black 1px; 
          .upload_head{
           
            .avatar-uploader .el-upload {
              border: 1px dashed #d9d9d9;
              border-radius: 6px;
              cursor: pointer;
              position: relative;
              overflow: hidden;
              
            }
            .avatar-uploader .el-upload:hover {
              border-color: #409EFF;
            }
            .avatar-uploader-icon {
              font-size: 28px;
              color: #8c939d;
              width: 158px;
              height: 158px;
              line-height: 178px;
              text-align: center;
              border: 1px solid black;
              border-radius: 50%;
            }
            .avatar {
              width: 178px;
              height: 178px;
              display: block;
            }
          }
          }
      }
    }
  }
</style>

